<template>
  <div class="home" ref="homeRef">
    <NavBar />
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="" />
    </div>
    <SearchBox />
    <HotCategories />
    <div class="search-bar" v-if="isShowSearchBox">
      <SearchBar />
    </div>
    <HotContent />
  </div>
</template>

<script>
export default {
  name: "home",
};
</script>

<script setup>
import { computed, onActivated, ref, watch } from "vue";
import useHomeStore from "@/stores/modules/home";
import NavBar from "./cpns/home-navBar.vue";
import SearchBox from "./cpns/home-searchBox.vue";
import HotCategories from "./cpns/home-categories.vue";
import HotContent from "./cpns/home-content.vue";
import useScroll from "@/hooks/useScroll";
import SearchBar from "../../components/search-bar/search-bar.vue";
import { def } from "@vue/shared";

//发送网络请求
const homeStore = useHomeStore();
homeStore.fetchHotSuggests();
homeStore.fetchHotCate();
homeStore.fetchHouseList();

const homeRef = ref();
const { isReachBottom, scrollTop } = useScroll(homeRef);
watch(isReachBottom, (newVal) => {
  if (newVal) {
    homeStore.fetchHouseList().then(() => {
      isReachBottom.value = false;
    });
  }
});

const isShowSearchBox = computed(() => {
  return scrollTop.value > 100;
});

//记录上一次跳转页面位置
onActivated(() => {
  homeRef.value?.scrollTo({
    top: scrollTop.value,
  });
});
</script>

<style lang="less" scoped>
.home {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: 50px;
}
.banner {
  img {
    width: 100%;
  }
}
.search-bar {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  padding: 16px 16px 10px;
  background-color: #fff;
}
</style>
